<!DOCTYPE HTML >
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta content="width=device-width, minimum-scale=1,initial-scale=1, maximum-scale=1, user-scalable=1" id="viewport" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <link type="text/css" rel="stylesheet" href="../../template/css/com/com.css" />
    <link type="text/css" rel="stylesheet" href="../../template/css/list/style.css" />
    <link rel="stylesheet" href="../../resource/weuimin.css" />
    <link rel="stylesheet" href="../../resource/jinsuistyle.css" />
    <script src="../../template/js/jquery.js"></script>
    <script type="text/javascript" src="../../script/constants.js"></script>
    <script type="text/javascript" charset="UTF-8" src="../../script/naes.js"></script>
    <script type="text/javascript" charset="UTF-8" src="../../script/tmd5.js"></script>
    <script src="../../script/api.js"></script>
    <title>酒店主界面</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }
    </style>
</head>

<body>
    <header id="statusBar">
        <div style="height:75px;background: #298cb4;display: table;width: 100%;">
            <div style="height:50px;margin-top: 25px;line-height: 50px;color: #ffffff;background: #1e6887;">
                <div style="width: 26%;margin-left: 3%;font-size: 16px;float: left;" onclick="api.closeWin();">
                    返回
                </div>
                <div id="hotel_name" style="text-align: center;font-weight:bold;width: 50%;font-size: 16px;float: left;">

                </div>
            </div>
        </div>
    </header>

    <div style="background: #ffffff;">
        <div id="hotel_pic" style="height:150px;width:100%;margin: 0 auto;"></div>
        <div style="height:40px;color:orange;line-height:40px;margin-left:5px;">
            <div id="countOfMyhotel">XX人收藏了我的酒店</div>
            <span id="no_collect" style="display:inline;"><img src="../../image/five-poited_star.png" style="float:right;width:32px;height:32px;margin-right:20px;" onclick="no_collect()"/></span>
            <span id="collect" style="display:none;"><img src="../../image/five-poited.png" style="float:right;width:32px;height:32px;margin-right:20px;" /></span>
        </div>
        <div style="height:30px;line-height:30px;font-family:楷体;border-top:1px solid #C3C3C3;border-bottom:1px solid #C3C3C3;margin-left:5px;margin-right:5px;">联系电话：<span id="hotel_tel" style=""></span></div>
        <div id="jianjie" style="width:90%;height:100%;font-family:楷体;font-size:12px;margin-left:5px;margin-right:5px;"></div>
    </div>

    <div style="width: 100%;background: #ffffff;height: 40px;display: table;border-top:1px solid #C3C3C3;border-bottom:1px solid #C3C3C3;">
        <div style="width: 98%;margin: 0 auto;height: 30px;line-height: 30px;display: table;">
            <div style="height:40px;margin-top: 5px;float: left;width:30%;">
                <input id="startTime" style="border: none;height:40px;background: #ffffff;font-size: 14px;width:105px;appearance:none;text-align: center;" type="date" value="" min="" onchange="modifyStartTime()" />
            </div>
            <div style="float: left;margin-top: 15px;margin-right: 15px;"><span style="font-size:12px;">入住</span></div>
            <div style="height:40px;margin-top: 5px;float: left;width:30%;">
                <input id="endTime" style="border: none;height:40px;background: #ffffff;font-size: 14px;appearance:none;width:105px;text-align: center;" type="date" value="" min="" onchange="modifyEndTime()" />
            </div>
            <div style="float: left;margin-top: 15px;margin-right: 5px;"><span style="font-size:12px;">离店</span></div>
            <div id="rest_day" style="height:40px;margin-top: 10px;float: left;width:20%;text-align: center;color: #8B8970;">
                共1晚
            </div>
        </div>
    </div>


    <div style="background: #ffffff;">
        <div style="height:41px;margin-left:5%;margin-right:5px;"><img src="../../image/map.png" style="" /><span id="hotel_addr"></span></div>
        <div id="hotel_position" style="width:90%;height:160px;margin-top:5px;margin-left:5%"></div>
        <div style="width:100%;height:50px;background-color:orange;font-size:20px;color:#fff;line-height:50px;text-align:center;letter-spacing:5px;" onclick="choose_room();">选择房型</div>
    </div>


    <script>
        var tel;
        var name;
        var hotelId;
        var amount;
        var phone;
        var collect;
				var ddate=1;
				var pic = new Array();
				var buildings;
        window.apiready = function() {
            // phone = $api.getStorage("dl_phone");
            phone = 15680030061;
            hotelId = api.pageParam.id;

            var callback = function(ret, err) {
                console.log(JSON.stringify(ret));
                if (ret) {
                    var str = ret.data;
                    var ss = str[0].picurl;
                    if(ss.length==0){
                        pic.push('weight://image/noimage.png');
                    }else {
                      for (var m = 0; m < ss.length; m++) {
                          pic.push((str[0].picurl)[m].URL);
                      }
                    }

										// alert(pic);
										// console.log(pic);
                    amount = str[0].AMOUNT;
                    name = str[0].NAME;
                    tel = str[0].PHONE;
                    collect = str[0].COLLECT;
                    buildings = str[0].buildings;
                    // alert(collect);
                    if (collect == 'true') {
                        $("#no_collect").css('display', 'none');
                        $("#collect").css('display', 'inline');
                    }
                    var descr = str[0].DESCR;
                    var addr = str[0].DZQC;
                    // alert(amount);
                    $("#countOfMyhotel").html(amount + "人收藏了我的酒店");
                    $("#hotel_name").html(name);
                    $("#hotel_tel").html(tel);
                    $("#jianjie").html(descr);
                    $("#jianjie").each(function() {
                        var maxwidth = 48; //设置最多显示的字数
                        var text = $(this).text();
                        if ($(this).text().length > maxwidth) {
                            $(this).text($(this).text().substring(0, maxwidth));
                            $(this).html($(this).html() + "......" + "<a id='a1' href='###' style='color:orange'> 点击展开</a>"); //如果字数超过最大字数，超出部分用...代替，并且在后面加上点击展开的链接；

                        };
                        $(this).find("#a1").click(function() {
                            $(this).parent().text(text); //点击“点击展开”，展开全文

                        })

                    })
                    $("#hotel_addr").html(addr);
                    var offset = $api.offset($api.dom('#hotel_pic'));
                    var height = $("#hotel_pic").height();
                    var width = $("#hotel_pic").width();
                    var UIScrollPromptView = api.require('UIScrollPromptView');
                    UIScrollPromptView.open({
                        rect: {
                            x: offset.l,
                            y: offset.t,
                            w: width,
                            h: height
                        },
                        data: {
                            paths: pic,
                            captions: [],
                            prompts: pic
                        },
                        styles: {
                            caption: {
                                height: 35,
                                color: '#E0FFFF',
                                size: 13,
                                bgColor: '#696969',
                                position: 'bottom'
                            },
                            indicator: {
                                align: 'center',
                                color: '#FFFFFF',
                                activeColor: '#298cb4'
                            },
                            prompt: {
                                button: {
                                    normal: '',
                                    highlight: '',
                                    x: 0,
                                    y: 100,
                                    w: 60,
                                    h: 40
                                },
                                x: 0,
                                y: 50,
                                w: 160,
                                h: 90,
                                contentMode: 'scaleToFill',
                                animation: true
                            }
                        },
                        placeholderImg: '',
                        contentMode: 'scaleToFill',
                        interval: 3,
                        fixedOn: '',
                        loop: true,
                        fixed: false
                    });

                    var map = api.require('bMap');
                    map.getCoordsFromName({
                        address: addr
                    }, function(res, err) {
                        var os = $api.offset($api.dom('#hotel_position'));
                        var h = $("#hotel_position").height();
                        var w = $("#hotel_position").width();

                        if (res.status) {
                            //alert(JSON.stringify(res));
                            map.open({
                                rect: {
                                    x: os.l,
                                    y: os.t,
                                    w: w,
                                    h: h
                                },
                                center: {
                                    lon: res.lon,
                                    lat: res.lat
                                },
                                zoomLevel: 16,
                                showUserLocation: true,
                                fixedOn: api.frameName,
                                fixed: false
                            }, function(ret) {
                                if (ret.status) {
                                    //alert('地图打开成功');
                                }
                            });
                        }
                    });



                } else {
                    api.alert({
                        msg: JSON.stringify(err)
                    });

                }
            }

            var parameter = {
                "phone": phone,
                "id": hotelId
            };
            signAjax(JSON.stringify(parameter), url.jdxqTest, callback);

            var startTime = document.getElementById('startTime');
            var endTime = document.getElementById('endTime');
            checkOutEnd = getNowFormatDate(getDate(), 1);
            checkOutStart = getNowFormatDate(getDate(), 0);
            $("#startTime").val(checkOutStart);
            $("#endTime").val(checkOutEnd);
            $api.attr(startTime, 'min', checkOutStart);
            $api.attr(endTime, 'min', checkOutEnd);

            var openArea = document.getElementById('openArea');
            var timeRecord = {
                startTime: '',
                endTime: '',
                changeTime: ''
            }



            function touchstartFn() {
                timeRecord.startTime = new Date().getTime();
                openArea.style.color = "#660099";
            }

            function touchendFn() {
                timeRecord.endTime = new Date().getTime();
                timeRecord.changeTime = timeRecord.endTime - timeRecord.startTime;
                if (timeRecord.changeTime < 300) {
                    opennima();
                }
                openArea.style.color = "#005DA9";
            }
            var msg = api.pageParam.msg;
            var title = api.pageParam.title;

            if (msg = null && title != null) {
                $api.text(openArea, title);
            }
            if (msg != null) {
                $api.text(openArea, msg);
            }

        }


        function modifyStartTime() {
            var st = $("#startTime").val();
            var startTime = getNowFormatDate(st, 0);
            var endTime = getNowFormatDate(st, 1);
            $("#endTime").val(endTime);
            var et = document.getElementById('endTime');
            $api.attr(et, 'min', endTime);
        }

        function modifyEndTime() {
            var startDate = $("#startTime").val();
            var endDate = $("#endTime").val();
             ddate = getDays(startDate, endDate);
            $("#rest_day").html("共" + ddate + "晚");
        }

        function getDays(date1, date2) {
            var date1Str = date1.split("-"); //将日期字符串分隔为数组,数组元素分别为年.月.日
            //根据年 . 月 . 日的值创建Date对象
            var date1Obj = new Date(date1Str[0], (date1Str[1] - 1), date1Str[2]);
            var date2Str = date2.split("-");
            var date2Obj = new Date(date2Str[0], (date2Str[1] - 1), date2Str[2]);
            var t1 = date1Obj.getTime();
            var t2 = date2Obj.getTime();
            var dateTime = 1000 * 60 * 60 * 24; //每一天的毫秒数
            var minusDays = Math.floor(((t2 - t1) / dateTime)); //计算出两个日期的天数差
            var days = Math.abs(minusDays); //取绝对值
            return days;
        }


        function getNowFormatDate(date, addDayCount) {

            var now = new Date(date);
            now.setDate(now.getDate() + addDayCount);
            //格式化日，如果小于9，前面补0
            var day = ("0" + now.getDate()).slice(-2);
            var mday = ("0" + now.getDate()).slice(-2);
            var month = ("0" + (now.getMonth() + 1)).slice(-2);
            //拼装完整日期格式
            var newDate = now.getFullYear() + "-" + (month) + "-" + (day);
            return newDate;

        }

        function getDate() {
            var ddd = new Date();
            var day = ddd.getDate();

            if (ddd.getMonth() < 10) {
                var month = "0" + (ddd.getMonth() + 1);
            }

            if (ddd.getDate() < 10) {
                day = "0" + ddd.getDate();
            }

            var datew = ddd.getFullYear() + "-" + month + "-" + day;
            return datew;
        }

        //点击收藏时改变颜色
        function no_collect() {
            var callback = function(ret, err) {
                console.log(JSON.stringify(ret));
                if (ret.success) {
                    alert("收藏成功！");
                    $("#no_collect").css('display', 'none');
                    $("#collect").css('display', 'inline');

                    api.sendEvent({
                      name: 'RefreshQueryMyHotel',
                  });

                }

            }
            var parameter = {
                "phone": phone,
                "hotelId": hotelId
            };
            signAjax(JSON.stringify(parameter), url.scjdTest, callback);

        }

        // function collect() {
        // 	alert("取消收藏！");
        // 	$("#no_collect").css('display', 'inline');
        // 	$("#collect").css('display', 'none');
        // }

        function choose_room() {
            var map = api.require('bMap');
            map.close();
            var startTime = $("#startTime").val();
            var endTime = $("#endTime").val();

						var asdas = new Array();

						if(buildings.length==0){
							api.openWin({
									name: 'hotelNoBuilding_choose_room',
									url: 'hotelNoBuilding_choose_room.html',
									pageParam: {
											startTime: startTime,
											endTime: endTime,
											hotel_name: name,
											hotelId : hotelId,
											ddate  :  ddate,
											pic : pic
									}
							});
						}else if(buildings.length==1){
							api.openWin({
									name: 'choose_room',
									url: 'hotel_choose_room.html',
									pageParam: {
											startTime: startTime,
											endTime: endTime,
											hotel_name: name
									}
							});
						}else if(buildings.length>1){
							for(var x=0;x<(buildings.length);x++){
										asdas.push(buildings[x].JZMC);
							}
							api.actionSheet({
											title: '请选择建筑',
											cancelTitle: '取消',
											buttons: asdas
										}, function(ret, err) {
											var index = ret.buttonIndex;
											// alert(index-1);
											if(index<=buildings.length){
												api.openWin({
														name: 'choose_room',
														url: 'hotel_choose_room.html',
														pageParam: {
																startTime: startTime,
																endTime: endTime,
																hotel_name: name,
																index : index-1,
                                id : hotelId,
																buildings : buildings

														}
												});

											}

										});
					}
						}


    </script>


</body>

</html>
